<template>
    <view class="zcDetails">
        <view class="zcDetails-top">
            <view class="zcDetails-top-title" v-if="info.user_id == userId">
                <view class="zcDetails-top-title-text">{{ info.title }}</view>
                <button
                    open-type="share"
                    class="item btn"
                    style="
                        font-size: 30rpx;
                        padding: 5rpx;
                        margin: 0rpx;
                        color: #fff;
                        background: transparent;
                    "
                >
                    <image
                        :src="BaseUrl + '/static/catering/share.png'"
                        style="width: 30rpx; height: 30rpx"
                        mode="scaleToFill"
                    />
                </button>
            </view>
            <view class="zcDetails-top-get" style="padding-top: 30rpx">
                <view class="zcDetails-top-get-left">
                    <image
                        :src="BaseUrl + info.shop.avatar"
                        style="width: 72rpx; height: 72rpx; border-radius: 50%; margin-right: 20rpx"
                        mode="scaleToFill"
                    />
                    <view class="zcDetails-top-get-left-text">
                        <view class="zcDetails-top-get-left-texts">{{ info.shop.shopname }}</view>
                        <view class="zcDetails-top-get-left-textss">
                            <text class="zcDetails-top-get-num">
                                {{ info.views }} 浏览 / {{ info.createtime_text }}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="zcDetails-top-get-right" v-if="info.user_id != userId">
                    <button
                        open-type="share"
                        class="item btn"
                        style="
                            font-size: 30rpx;
                            padding: 5rpx;
                            margin: 0rpx;
                            color: #fff;
                            background: transparent;
                        "
                    >
                        <image
                            :src="BaseUrl + '/static/catering/share.png'"
                            style="width: 30rpx; height: 30rpx"
                            mode="scaleToFill"
                        />
                    </button>
                    <view>
                        <view class="cart-right-right" @click="dian(info.id)">
                            <view v-if="0 == info.isLike" class="cart-right-ss">
                                <image
                                    :src="BaseUrl + '/static/catering/noollection.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-texts">未收藏</view>
                            </view>
                            <view v-else class="cart-right-s">
                                <image
                                    :src="BaseUrl + '/static/catering/shouc.png'"
                                    style="width: 30rpx; height: 30rpx"
                                    mode="scaleToFill"
                                />
                                <view class="cart-right-s-text">已收藏</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="zcDetails-content">
            <!-- <uv-parse :content="info.content"></uv-parse> -->
            <view class="dT">
                {{ info.content }}
            </view>
        </view>
        <view class="zcDetails-img">
            <image
                v-for="item in info.images"
                :src="BaseUrl + item"
                :key="item"
                mode="scaleToFill"
            ></image>
            <block v-for="(video, index) in videoList" :key="index">
                <video
                    style="width: 100%; height: 400rpx"
                    v-if="video !== ''"
                    :src="BaseUrl + video"
                />
            </block>
        </view>
        <view class="zcDetails-pl" style="margin-top: 20rpx">
            <view>
                <view class="zcDetails-pl-top">
                    <view class="zcDetails-pl-top-text">评论 ({{ getlistnum }})</view>
                    <view class="zcDetails-pl-top-texts" @click="goComment">
                        <view class="zcDetails-pl-top-textss">查看全部</view>
                        <image
                            :src="BaseUrl + '/static/catering/xygx.png'"
                            style="width: 10rpx; height: 20rpx"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="zcDetails-pl-cart" v-for="item in list" :key="item.id">
                <view class="zcDetails-pl-cart-top" style="margin-top: 30rpx">
                    <image
                        :src="BaseUrl + item.user.avatar"
                        style="width: 72rpx; height: 72rpx; border-radius: 50%"
                        mode="scaleToFill"
                    />
                    <view class="zcDetails-pl-cart-top-text">
                        <view class="zcDetails-pl-cart-top-name">{{ item.user.nickname }}</view>
                        <view class="zcDetails-pl-cart-top-time">{{ item.createtime_text }}</view>
                    </view>
                    </view>
                    <view class="zcDetails-pl-cart-content">
                        {{ item.content }}
                    </view>
                    <view class="zcDetails-pl-cart-img">
                        <image v-for="item1 in item.images" :key="item1" :src="item1"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            loge: 1,
            info: {},
            // 评论数组
            list: [1, 2, 3],
            // 评论总数
            getlistnum: 0,
            id: 0,
            userId: uni.getStorageSync("userInfo").id,
            videoList: [],
        };
    },
    onLoad(e) {
        this.id = e.id;
        this.getlist();
        this.delete();
    },
    onShow() {
        this.getlist();
    },
    methods: {
        goComment() {
            uni.navigateTo({
                url: "/dabai/pages/comment?id=" + this.id,
            });
        },
        // 收藏
        async dian(id) {
            await this.$request
                .post("api/wanlshop/find/user/setFindUser", {
                    id: id,
                    type: "likes",
                })
                .then((res) => {
                    if (res.data.data == 1) {
                        uni.showToast({
                            title: "收藏成功",
                            icon: "none",
                            duration: 2000,
                        });
                        // this.delete();
                        this.info.isLike = 1;
                    } else {
                        uni.showToast({
                            title: "取消收藏",
                            icon: "none",
                            duration: 2000,
                        });
                        this.info.isLike = 0;
                        // this.delete();
                    }
                });
        },
        //关注
        async follow(id) {
            await this.$request
                .post("api/wanlshop.find.user/setFollowUser", {
                    id: id,
                })
                .then((res) => {
                    if (res.data.data == 1) {
                        uni.showToast({
                            title: "关注成功",
                            icon: "none",
                            duration: 2000,
                        });
                        // this.delete();
                        this.info.isFollow = 1;
                    } else {
                        uni.showToast({
                            title: "取消关注",
                            icon: "none",
                            duration: 2000,
                        });
                        // this.delete();
                        this.info.isFollow = 0;
                    }
                });
        },
        // 时间戳转时间
        convertTimestamp(timestamp) {
            // 创建一个新的 Date 对象
            let date = new Date(timestamp);

            // 获取年、月、日、小时、分钟和秒
            let year = date.getFullYear();
            let month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的
            let day = date.getDate();

            // 补全两位数格式
            month = month < 10 ? "0" + month : month;
            day = day < 10 ? "0" + day : day;

            // 返回格式化的日期字符串
            return `${year}-${month}-${day}`;
        },

        leftClick() {
            uni.navigateBack({
                delta: 1,
            });
        },
        // 文章详情
        async delete() {
            await this.$request
                .post("api/wanlshop.find.find/getDetails", {
                    id: this.id,
                })
                .then((res) => {
                    this.info = res.data;
                    this.videoList = res.data.video.split(",");
                });
        },
        // 获取评论
        async getlist() {
            await this.$request
                .get("api/wanlshop.find.comments/getList", {
                    id: this.id,
                })
                .then((res) => {
                    console.log(res.data, "评论");
                    this.list = res.data.list;
                    this.getlistnum = res.data.count;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.zcDetails {
    width: 100vw;

    .zcDetails-top {
        width: 92vw;
        margin: 10rpx 4vw;
        .zcDetails-top-title {
            display: flex;
            justify-content: space-between;
            padding-top: 30rpx;

            .zcDetails-top-title-text {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 38rpx;
                color: #121212;
                letter-spacing: 1.8rpx;
                width: 80%;
                // height: 100rpx;
                line-height: 50rpx;
            }
        }

        .zcDetails-top-get {
            display: flex;
            justify-content: space-between;
            align-items: center;
            // margin-top: 30rpx;

            .zcDetails-top-get-left {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .zcDetails-top-get-left-text {
                    .zcDetails-top-get-left-texts {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #121212;
                    }

                    .zcDetails-top-get-left-textss {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 10rpx;

                        .zcDetails-top-get-num {
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: 26rpx;
                            color: #666666;
                        }
                    }
                }
            }

            .cart-right-right {
                display: flex;
                align-items: center;

                .cart-right-s {
                    display: flex;
                    align-items: center;
                    padding: 6rpx 15rpx;
                }

                .cart-right-ss {
                    display: flex;
                    align-items: center;
                    padding: 6rpx 15rpx;
                }
            }
        }
    }

    .zcDetails-content {
        width: 94vw;
        margin: 0rpx 3vw;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 48rpx;
    }

    .zcDetails-img {
        width: 94vw;
        margin: 30rpx 3vw;

        image {
            width: 100%;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
        }
    }

    .zcDetails-pl {
        width: 100vw;
        background-color: #f6f6f6;
        height: 33vh;
        margin-top: 40rpx;
        border-radius: 40rpx 40rpx 0 0;

        .zcDetails-pl-top {
            width: 92vw;
            margin: 0 4vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30rpx;
            height: 80rpx;

            .zcDetails-pl-top-text {
                font-family: Source Han Sans CN;
                font-weight: 550;
                font-size: 30rpx;
                color: #121314;
            }

            .zcDetails-pl-top-texts {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .zcDetails-pl-top-textss {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #a9a9a9;
                    margin-right: 20rpx;
                }
            }
        }

        .zcDetails-pl-cart {
            width: 94vw;
            margin: 0 3vw;
            background-color: #fff;
            border-radius: 36rpx;

            .zcDetails-pl-cart-top {
                height: 140rpx;
                display: flex;
                align-items: center;
                padding: 20rpx 30rpx;

                .zcDetails-pl-cart-top-text {
                    margin-left: 20rpx;

                    .zcDetails-pl-cart-top-name {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #121212;
                    }

                    .zcDetails-pl-cart-top-time {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                        margin-top: 10rpx;
                    }
                }
            }

            .zcDetails-pl-cart-content {
                padding: 0 30rpx 20rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 26rpx;
                color: #000;
                line-height: 48rpx;
                letter-spacing: 4rpx;
            }

            .zcDetails-pl-cart-img {
                width: 94vw;

                display: flex;
                justify-content: space-around;

                image {
                    width: 200rpx;
                    height: 200rpx;
                }
            }
        }
    }
}
.dT {
    line-height: 1.6rem;
}
.zcDetails-top-get-right {
    display: flex;
}
</style>
